<template>
  <div>

    <div class="page-title">{{ getLang('pageTitle') }}</div>
    <div class="app-container">

      <el-row :gutter="16">
        <el-col :span="9">
          <div class="block-title">{{ getLang('blockTitle') }}</div>
          <br>
          <div class="filter-container">
            <comm-form
              ref="dictTypeForm"
              :form-visible="true"
              :form-definition="dictTypeSearchFormLayout"
              :form-data="{}"
            />
          </div>
          <FlexTable
            ref="dictTypeList"
            :table-key="listObj.dictType.isUpdate"
            :ref-main-page="refSelfObj"
            :show-selection="true"
            :has-action-columns="false"
            :table-visible="true"
            :selected-data="listObj.dictType.selectedData"
            edit-mode="none"
            height="100%"
            :is-loading="listObj.dictType.listLineLoading"
            :table-definition="dictTypeListLayout"
            :table-data="listObj.dictType.listLine"
            @selection-change="handleDictTypeSelChange"
          />

        </el-col>
        <el-col :span="15">
          <div class="filter-container">
            <comm-form
              ref="searchForm"
              :form-visible="true"
              :form-definition="dictDataSearchFormLayout"
              :form-data="formObj.searchForm.dictData"
            />
          </div>
          <FlexTable
            ref="dictList"
            :table-key="listObj.dictData.isUpdate"
            :ref-main-page="refSelfObj"
            :title="getLang('dictList')"
            :show-selection="true"
            :has-action-columns="true"
            :multiple-select="true"
            :table-visible="true"
            :selected-data="listObj.dictData.selectedData"
            edit-mode="none"
            height="500"
            :is-loading="listObj.dictData.listLineLoading"
            :table-definition="dictListLayout"
            :table-data="listObj.dictData.listLine"
          />
          <pagination
            v-show="listObj.dictData.lineNum>0"
            :total="listObj.dictData.lineNum"
            :page.sync="listObj.dictData.pagingDefine.page"
            :limit.sync="listObj.dictData.pagingDefine.limit"
            @pagination="searchPagingDict"
          />
        </el-col>
      </el-row>

      <form-dialog
        v-if="formObj.addForm.showFlg.dictData"
        ref="dictEditDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.dictData"
        :title="isAddDictData?getLang('addDictData'):getLang('updateDictData')"
        column-count="2"
        :form-data="formObj.addForm.dictData"
        :form-definition="dictDataAddFormLayout"
        @close="formObj.addForm.showFlg.dictData = false"
      />

      <form-dialog
        v-if="formObj.addForm.showFlg.dictType"
        ref="dictTypeEditDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.dictType"
        :title="isAddDictType?getLang('addDictType'):getLang('updateDictType')"
        column-count="2"
        :form-data="formObj.addForm.dictType"
        :form-definition="dictTypeAddFormLayout"
        @close="formObj.addForm.showFlg.dictType = false"
      />

      <el-tooltip placement="top" content="tooltip">
        <back-to-top :custom-style="baseBckToTopStyle" :visibility-height="300" :back-position="1" transition-name="fade" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import BackToTop from '@/components/BackToTop'

import FormDialog from '../../common/components/form-dialog/FormDialog'
import FlexTable from '../../common/components/flex-table/FlexTable'
import CommForm from '../../common/components/com-form/CommForm'

import logic from './dict.logic'

export default {
  name: 'DictPage',
  components: { Pagination, BackToTop, FormDialog, FlexTable, CommForm },
  mixins: [logic]
}
</script>

<style lang="scss" scoped>
</style>
